// mode 组件
import React,{useEffect} from 'react';
import { Modal,Form, Input,} from 'antd';


// interface propsType {
//     isShow:String;
//     Cloce:String;
//     record:String

// }

const NxModal = (props:any) => {
    const [form] = Form.useForm();
    let {isShow,Cloce,record,title,onFinish} = props

    // form.setFieldsValue =(record)
    //加上forceRender强制渲染
    useEffect(() => {
        if (record === null) {
          form.resetFields();
        } else {
          form.setFieldsValue({
            ...record,
          });
        }
      }, [isShow]);
      
    const onOk = () => {          
        form.submit();
      };

  return (
      <div>
        <Modal visible={isShow}  onCancel = {Cloce} title={title}  forceRender onOk={onOk}>   
            <Form
            name="basic"
            form={form}
            onFinish={onFinish}
            >
                <Form.Item
                    label="UserName"
                    name="userName"
                    rules={[{ required: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Account"
                    name="account"
                    rules={[{ required: true }]}
                >
                    <Input />
                </Form.Item>           
                <Form.Item
                    label="CreateDate"
                    name="createDate"
                    rules={[{ required: true }]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
      </div>
  );
};

export default NxModal